<template>
	<view class="bannerBg" id="bannerBg">
		<!-- <view class="flex-box zhongqiu-title">
				<img src="https://yi.qj361.com/20210904135934_zhongQiuTitle.png" alt="">
				<view class="notices-box">
					<swiper vertical="false" :autoplay="autoplay" circular="true" interval="3000">
						<swiper-item class="notice-box" v-for="(item,index) in notices" :key="index">
							<text>{{item}}</text>
						</swiper-item>
					</swiper>
				</view>
			</view> -->

		<!-- <uni-swiper-dot :info="bannerList" :current="current" mode="dot" :dots-styles="dotsStyles">
				<swiper class="swiper-box" :autoplay="autoplay" @change="change" display-multiple-items="3" circular="false" next-margin="18rpx" interval="3000">
					<swiper-item v-for="(item ,index) in bannerList" :key="index">
						<navigator :url="item.link">
							<view class="swiper-item">
								<image :src="item.src" mode="aspectFill"></image>
								<view class="img-text-box">
									<text class="img-text-top">{{item.name}}</text>
									<text class="img-text-bottom">{{item.describe}}</text>
								</view>
							</view>
						</navigator>
					</swiper-item>
				</swiper>
			</uni-swiper-dot> -->
		<swiper @change="change" :current="current" :autoplay="autoplay" :circular="circular">
			<swiper-item class="flex-box justify-between" v-for="(item,index) in commodities" :key="index">
				<navigator :url="item.url" hover-class="none" class="flex-box justify-between nav">
					<view class="text-box">
						<view class="text-row text-row1">
							<text class="text-col" v-for="(item2,index) in item.specifications">{{item2}}</text>
						</view>
						<view class="text-row text-row2">
							<text>{{item.name}}</text>
						</view>
					</view>
					<view class="shangpin-box">
						<image :src="item.img" mode="widthFixd"></image>
					</view>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="dots">
			<blcok v-for="(item,index) in commodities" :key="index">
				<view class="dot" :class="[index == swiperIndex?'dot-active': '']"></view>
			</blcok>
		</view>
		<view class="integral-rule" @click="toRule">
			<text>规则</text>
			<img src="https://yi.qj361.com/20210818220621_ruleIcon.png" alt="">
		</view>
		<view class="banner-logo">
			<image :src="bannerData.logo"></image>
		</view>
		<view class="banner-data">
			<view class="yuan-box">
				<text class="symbol">¥</text>
				<text class="yuan">{{bannerData.money}}</text>
			</view>
			<view class="banner-introduce">
				<text>{{bannerData.introduce}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				// currentIndex: 0,
				autoplay: true,
				dotsStyles: {
					bottom: 8,
					backgroundColor: '#556A95',
					selectedBackgroundColor: '#FFFFFF',
					border: '0px rgba(0, 0, 0, .3) solid',
					selectedBorder: '0px rgba(0, 0, 0, .9) solid'
				},
				swiperIndex: 0,
				circular: true,
				imgStyle: []
			}
		},
		props: {
			bannerList: {
				type: Array,
				default: []
			},
			notices: {
				type: Array,
				default: []
			},
			commodities: {
				type: Array,
				default: []
			},
			bannerData: {
				type: Object,
				default: {}
			}
		},
		methods: {
			change(e) {
				// this.current = e.detail.current;
				this.swiperIndex = e.detail.current
			},
			toRule: function() {
				// this.$yrouter.push({
				//  path: '/pages/intergralRule/index'
				// });
				uni.navigateTo({
					url: "/pages/intergralRule/index"
				})
			},
			// imgInfo: function(e) {
			// 	var that = this;
			// 	var current = that.current;
			// 	// that.imgStyle.push(e.detail);
			// 	// console.log(that.imgStyle);
			// 	var a = e.currentTarget.id;
			// 	var arrayLength = that.commodities.length;
			// 	console.log(arrayLength);
			// 	if(a < arrayLength){
					
			// 	}
			// }
		},
		created: function() {
			let that = this;
			// let systemInfo = uni.getSystemInfoSync();
			// const query = uni.createSelectorQuery().in(this);
			// let statusBarHeight = systemInfo.statusBarHeight;
			// console.log(statusBarHeight);
			// let marTop = statusBarHeight + 43
			// console.log(marTop);
			// that.marTop = marTop;
			// query.select('#bannerBg').boundingClientRect(data => {
			// 	console.log(data.height)
			// 	that.bodyHeight = data.height - that.marTop;
			// 	console.log(that.bodyHeight)
			// }).exec();
			// query.select('.zhongqiu-title').boundingClientRect(data => {
			// 	console.log(data.top)
			// }).exec();

		},
	}
</script>

<style>
	.flex-box {
		display: flex;
		align-items: center;
	}

	.zhongqiu-title {
		position: relative;
		margin-top: 61rpx;
	}

	.notices-box {
		width: 330rpx;
		height: 40rpx;
		background: #000000;
		border-radius: 0px 100rpx 100rpx 0px;
		opacity: 0.47;
		position: absolute;
		left: 72rpx;
		bottom: 0;
	}

	.notices-box swiper {
		width: 330rpx;
		height: 40rpx;
		/* border-radius: 0px 100rpx 100rpx 0px; */
	}

	.notice-box {
		display: flex;
		align-items: center;
		padding-left: 12rpx;
	}

	.notice-box text {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 30rpx;
	}

	.zhongqiu-title img {
		width: 299rpx;
		height: 114rpx;
	}

	.swiper-box {
		width: 654rpx;
		height: 280rpx;
		border-top-left-radius: 8rpx;
		border-bottom-left-radius: 8rpx;
		overflow: hidden;
		/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
		transform: translateY(0);
		margin-bottom: 50rpx;
		position: relative;
	}

	.swiper-item {
		width: 200rpx;
		height: 280rpx;
		position: relative;
	}

	.img-text-box {
		width: 200rpx;
		height: 80rpx;
		position: absolute;
		bottom: 0;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.img-text-top {
		font-size: 26rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #0E2B65;
		line-height: 37rpx;
	}

	.img-text-bottom {
		font-size: 22rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #C30D64;
		line-height: 30rpx;
		margin-top: 2rpx;
	}

	.swiper-box image {
		width: 100%;
		height: 280rpx;
	}

	.bannerBg {
		width: 750rpx;
		height: 385rpx;
		background-image: url('https://yi.qj361.com/20210917111323_banner_bg.png');
		background-size: cover;
		background-position: center top;
		/* position: relative; */
		overflow: hidden;
		padding: 0 28rpx 0 68rpx;
		position: relative;
	}

	.integral-rule {
		width: 100%;
		height: 28rpx;
		position: absolute;
		z-index: 666;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 4rpx;
		bottom: 13rpx;
		right: 48rpx;
	}

	.integral-rule img {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
	}

	.integral-rule text {
		font-size: 20rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: normal;
		padding: 8rpx 0;
	}

	.text-box {
		height: 233rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.text-row {
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33rpx;
	}

	.text-row1 text {
		margin-right: 10rpx;
	}

	.text-row2 {
		height: 65rpx;
		font-size: 46rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 65rpx;
		margin-bottom: 40rpx;
	}

	.bannerBg swiper {
		height: 340rpx;
		margin-top: 26rpx;
	}

	.shangpin-box {
		width: 340rpx;
		height: 340rpx;
		position: absolute;
		right: 0;
		bottom: -20rpx;
	}
	
	.shangpin-box image {
		width: 100%;
		height: 100%;
	}

	.justify-between {
		justify-content: space-between;
	}

	.dots {
		width: min-content;
		display: flex;
		height: 8rpx;
		background: rgb(255, 255, 255, 0.3);
		border-radius: 5rpx;
		position: absolute;
		bottom: 41rpx;
	}

	.dot {
		width: 24rpx;
		height: 8rpx;
		border-radius: 5rpx;
	}

	.dot-active {
		background: #ffffff;
	}

	.banner-logo {
		width: 287rpx;
		height: 58rpx;
		position: absolute;
		top: 61rpx;
	}

	.banner-logo image {
		width: 100%;
		height: 100%;
	}

	.banner-data {
		display: flex;
		position: absolute;
		bottom: 85rpx;
		align-items: flex-end;
	}

	.banner-introduce {
		width: 170rpx;
		height: 32rpx;
		background: linear-gradient(135deg, #FEE4A7 0%, #FDDA7C 100%);
		border-radius: 4rpx;
		display: flex;
		justify-content: center;
		margin-bottom: 13rpx;
		margin-left: 12rpx;
	}

	.banner-introduce text {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #803310;
		line-height: 32rpx;
	}

	.yuan-box {
		display: flex;
		align-items: flex-end;
	}

	.symbol {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33rpx;
		margin-bottom: 6rpx;
	}

	.yuan {
		font-size: 56rpx;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 62rpx;
		margin-left: 4rpx;
	}
	.nav {
		width: 100%;
		height: 100%;
	}
</style>
